<template>
  <div class="h-full bg-zinc-200 dark:bg-zinc-800 duration-500 overflow-auto xl:pt-1">
    <div
      class="relative max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-500 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border xl:px-4 xl: py-2">
      <!-- 移动端 -->
      <m-navbar stickey v-if="isMobileTerminal" :clickLeft="onNavbarLeftClick">
        个人资料
      </m-navbar>
      <!-- pc端标题 -->
      <div v-else class="text-lg font-bold text-center mb-4 dark:text-zinc-300">
        个人资料
      </div>

      <div class="h-full w-full px-1 pb-4 text-sm mt-2 xl:text-center xl:w-2/3">
        <!-- 头像部分 -->
        <div class="xl:absolute xl:right-[16%] xl:text-center py-1">
          <span class="w-8 inline-block mb-2 font-black text-sm dark:text-zinc-300 xl:block xl:mx-auto">我的头像</span>
          <div @click="onAvatarClick"
            class="relative w-[80px] h-auto group xly:cursor-pointer xl:left-1/2 xl:translate-x-[-50%]">
            <img v-lazy :src="$store.getters.userInfo.avatar" class="rounded-full w-full h-full xl:inline-block" alt="" />
            <!-- hover 显示更换图片 -->
            <div
              class="absolute scale-90 top-0 rounded-full w-full h-full duration-300 bg-black/40 hidden xl:group-hover:block">
              <m-svg-icon name="change-header-image" class="w-2 h-2 m-auto mt-2"></m-svg-icon>
              <div class="text-xs text-white dark:text-zinc-300">
                点击更换图像
              </div>
            </div>
            <!-- 隐藏域 触发文件选择 -->
            <input v-show="false" ref="inputFileTarget" type="file" accept=".jpg, .jpeg, .png, .gif"
              @change="onSelectImgHandler" />
            <p class="mt-1 text-zinc-500 dark-text-zinc-400 text-xs xl:w-10">
              支持 jpg、png、gif、jpeg 格式大小5M以内的图片
            </p>
          </div>
        </div>
        <!-- 信息输入 -->
        <!-- 用户名 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold drak:text-zinc-300 xl:mb-0">用户名</span>
          <!-- 
            v-model === modelValue + update:modelValue
           -->
          <m-input class="w-full" max="20" type="text" v-model="userInfo.nickname" />
        </div>
        <!-- 职位 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold drak:text-zinc-300 xl:mb-0">职位</span>
          <m-input type="text" class="w-full" v-model="userInfo.title" />
        </div>
        <!-- 公司 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold drak:text-zinc-300 xl:mb-0">公司</span>
          <m-input type="text" class="w-full" v-model="userInfo.company" />
        </div>
        <!-- 个人主页 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold drak:text-zinc-300 xl:mb-0">个人主页</span>
          <m-input type="text" class="w-full" v-model="userInfo.homePage" />
        </div>
        <!-- 个人介绍 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold drak:text-zinc-300 xl:mb-0">个人介绍</span>
          <m-input type="textarea" class="w-full" max="50" v-model="userInfo.introduction" />
        </div>
        <!-- 保存修改 -->
        <m-button @click="saveChangeClick" :loading="loading"
          class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]">
          保存修改
        </m-button>
        <!-- 退出登录 -->
        <m-button v-if="isMobileTerminal" @click="logoutClick"
          class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]">
          退出登录
        </m-button>
      </div>
    </div>
    <!-- pc端下展示 -->
    <m-dialog v-if="!isMobileTerminal" title="裁剪图片" v-model="isDialogVisiable">
      <change-avatar @close="isDialogVisiable = false" :blob="dialogSrc"></change-avatar>
    </m-dialog>
    <m-popup v-else :class="{ 'h-[80%]': isDialogVisiable }" v-model="isDialogVisiable">
      <change-avatar @close="isDialogVisiable = false" :blob="dialogSrc"></change-avatar>
    </m-popup>
  </div>
</template>

<script setup>
import { isMobileTerminal } from '@/utils/flexible.js'
import { ref } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { confirm } from '../../libs'
import { putProfile } from '@/api/system'
import { message } from '../../libs'
import changeAvatar from './components/change-avatar.vue'
import { watch } from '@vue/runtime-core'
// 定义路由
const router = useRouter()
// 定义store
const store = useStore()
const show = ref(true)

// 退出登录
const logoutClick = () => {
  confirm('确定要退出登录吗？').then(() => {
    store.dispatch('user/logout')
  })
}

// navbar左边按钮点击
const onNavbarLeftClick = () => {
  store.commit('app/changeRouterType', 'back')
  router.back()
}

// 定义隐藏域（图片上传节点）
const inputFileTarget = ref(null)
// 定义显示裁剪图片dialog的v-model
const isDialogVisiable = ref(false)
// 定义裁剪图片地址
const dialogSrc = ref('')
// 选择头像
const onAvatarClick = () => {
  // 触发选择图片
  inputFileTarget.value.click()
}
// 选中图片文件的回调
const onSelectImgHandler = (e) => {
  const imgFile = inputFileTarget.value.files[0]
  const blob = URL.createObjectURL(imgFile)
  dialogSrc.value = blob
  isDialogVisiable.value = true
}
// 监听isDialogVisiable关闭 清空上传的图片文件
watch(isDialogVisiable, (val) => {
  if (!val) {
    // 防止change不重复触发
    inputFileTarget.value.value = null
  }
})

// 改变输入框
const userInfo = ref({
  ...store.getters.userInfo
})

// 保存修改用户信息
const loading = ref(false)
const saveChangeClick = async () => {
  loading.value = true
  await putProfile(userInfo.value)
  store.commit('user/setUserInfo', userInfo.value)
  message('success', '用户信息修改成功')
  loading.value = false
}
</script>

<style lang="scss" scoped></style>
